.root {
  --container-size-xs: 540px;
  --container-size-sm: 720px;
  --container-size-md: 960px;
  --container-size-lg: 1140px;
  --container-size-xl: 1320px;
  --container-size: var(--container-size-md);

  &:where([data-strategy='block']) {
    max-width: var(--container-size);
    padding-inline: var(--mantine-spacing-md);
    margin-inline: auto;

    &:where([data-fluid]) {
      max-width: 100%;
    }
  }

  &:where([data-strategy='grid']) {
    display: grid;
    grid-template-columns: 1fr min(100%, var(--container-size)) 1fr;
    margin-inline: auto;

    & > * {
      grid-column: 2;
    }

    & > [data-breakout] {
      grid-column: 1 / -1;

      & > [data-container] {
        max-width: var(--container-size);
        margin-inline: auto;
      }
    }
  }
}
